BAB 03 
Metode Penulisan Dasar CS$ 





Pada pembahasan kali ini, kita akan menelusuri pemograman CSS 
lebih dalam lagi. Ada beberapa penulisan dasar dalam CSS yang 
wajib kita ketahui. Beberapa penulisan itu terdiri atas Format 
Penulisan, Embedded Style Sheet, Inline Style Sheet, Linked Style 
Sheet, serta Cara Memberi Komentar pada file HTML maupun CSS. 
Yukk ... kita langsung saja masuk ke dalam masing-masing 
pembahasan. 


3.1 Format Penulisan 


Sepertinya format penulisan dasar ini sudah dibahas pada bab 
pertama. Tapi tak apa, penulis akan uraikan kembali format 
penulisan yang lebih spesifik. Format penulisan pada CSS didasar- 
kan pada format dasar penulisan berikut. 


Selektor ( 
Properti: nilai/value: 


) 


Misalnya kita ingin menjadikan setiap kode HTML «p» menjadi huruf 
merah semua. Dengan tanpa bantuan CSS, maka dalam melakukan 
pewarnaan huruf merah akan dilakukan kode perulangan berkali- 
kali, misalnya: 


xp» Sfont color-"red"» Panduan Lengkap Pemograman CSS untuk 
Pemula «/font? «/p» 

xp? font color-"red"» PT. Elex Media Komputindo «/font» «/p» 

Xp» Sfont color-"red"» Jakarta «/font? «/p» 
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Kondisi penulisan kode perulangan seperti ini akan mengakibatkan 
website menjadi lambat untuk diakses. Selain itu, cara pengerjaan 
juga akan memakan waktu yang cukup lama karena hal penulisan 
kode yang seperti itu. 


Bandingkan jika kita menggunakan bantuan kode CSS. Kita cukup 
membuatkan satu selektor untuk kemudian selektor itu dapat digu- 
nakan berkali-kali sesuai pemanggilan kebutuhan. Misalnya kita 
membuatkan selektor untuk cp» berikut. 


pt 
color: red: 
) 


Dan kemudian kita gunakan dalam kode HTML berikut: 


«Sp? Panduan Lengkap Pemograman CSS untuk Pemula «/p» 
Sp? PT. Elex Media Komputindo «/p» 
Sp? Jakarta «/p» 


Maka hasilnya akan sama saja seperti skrip full kode HTML yang 
pertama. Lihat Gambar 3.1. 


| Nintake Dasar ea Opera 


File Edit View Bookmarks Widgets Feeds Tools Help 
(5 Sintaks Dasar CSS 


DO ft a-||I Local | localhost/C:/xampp/htdocs/CSS/sintaks dasar.html 





Panduan Lengkap Pemograman CSS untuk Pemula 
PT. Elex Media Komputindo 


Jakarta 





Gambar 3.1 Hasil Penulisan 


Lihat-lihat di gambar kok warnanya tetap hitam ya (bukan merah)? 
Ya iyalah, namanya juga format picture-nya di grayscale. (Lihatnya 
melalui browser web ya 9.) Begini saja, kita ubah kode CSS-nya 
untuk membedakan tulisan. Ubah menjadi ketentuan, setiap perintah 
«cp» akan diberi huruf warna merah, bercetak tebal, dan bergaris 
bawah. Bagaimana hayoo untuk mengubah propertinya? .. Cukup 
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simple kok. Tambahkan saja pada selektor p menjadi kode yang 
tercetak tebal seperti berikut. 


pt 
color: red: 


font-weight: bold: 
text-decoration: underline, 
) 


Macam-macam selektor dan properti akan penulis bahas pada bab 
selanjutnya (Bab 5 dan Bab 6). Iseng-iseng lihat hasil perbedaannya 
dulu, lihat Gambar 3.2. 


NO Sintaks Dasar CSS - Opera 


File Edit View Bookmarks Widgets Feeds Tools Help 
(£| Sintaks Dasar CSS 


klem: '2 Mb || Local | localhost/C:/xampp/htdocs/CSS/sintaks dasar.html 





Panduan Lengkap Pemograman CSS untuk Pemula 





PT. Elex Media Komputindo 





Jakarta 





Gambar 3.2 Hasil Penambahan Properti 


Lihat, sudah mulai kelihatan pasti khan perbedaannya? .. Kalo gitu 
lanjut pembahasan subbab berikutnya. 


3.2 Embedded Style Sheet 


Embedded Style Sheet adalah CSS yang disisipkan pada tag HTML. 
Embedded Style Sheet tersebut diletakkan sebelum tag «body» pada 
kode HTML. Penulisannya menggunakan tag «style» sebagai awal 
dan «/style» sebagai penutup. 


CSS bisa berisi elemen-elemen atau atribut-atribut yang akan 
digunakan oleh tag HTML. 


Berikut contohnya. 


«html» 
Shead» 
Ktilte» Embedded Style Sheet «/title» 


Sstyles 
«!—- Atribut CSS --—5 
«/styles 


«body» 
€t-5 Tag HTML —-» 
«/body» 
«/html» 


Sepertinya jika tidak terjun langsung, susah juga ya. Coba kita 
langsung terjun saja ke dalam contoh pembuatan skrip Embedded 
Style Sheet. 


Langkah Pertama 


Buat folder terlebih dahulu dengan nama bebas (terserah Anda). 
Namun, penulis membuat folder dengan nama CSS (Anda juga 
dapat mengikuti penamaan folder seperti yang penulis gunakan). 
Sebenarnya tanpa membuat folder terlebih dahulu juga bisa, 
namun di sini penulis menyuruh Anda untuk membuatkan folder 
agar semua file CSS yang akan kita buat selanjutnya bisa 
ditampung dalam satu folder untuk mempermudah Anda dalam 
mempelajari. Untuk lebih mempermudah lagi, sebaiknya Anda 
buatkan satu folder lagi dalam folder CSS tersebut dengan nama 
bab3. 


Langkah Kedua 


Buat file HTML dengan nama embedded1.html kemudian letakkan 
dalam folder bab3 tersebut. Kemudian ketikkan contoh peng- 
gunaan embedded style sheet tersebut. 


Shtml» 
Shead» 

Ktitle» Sintaks Dasar CSS «/titler 
«/head»s 
KSstyle» 

body ( 

background: #999999: 
, 
h1l ( 


font-size: 18pt: 
color: #FF0000: 
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, 


p 
color: red: 
font-weight: bold, 
text-decoration: underline, 
, 
«/style» 


«body» 


Sh1l» Panduan Lengkap Pemograman CSS untuk Pemula «/hl1» 
Sp? PT. Elex Media Komputindo «/p» 
Sp? Jakarta «/p» 


«/body» 
«/html» 


Lihat skrip, pada skrip embedded tersebut kita menciptakan 
selektor untuk body, h1, dan p yang mana memiliki value masing- 
masing. Kemudian selektor tersebut kita gunakan dalam tag HTML 
(kboay»,«h1», dan cp»). Sekarang coba Anda klik dua kali (klik 
ganda) pada embeddedi.html di folder CSSiVbab3 (lihat pada 
Gambar 3.3), maka akan tampil hasilnya seperti Gambar 3.4. 


aa) 


| lx Data (E) » CSS » bab3 v4 IN Search bab3 





| File Edit View Tools Help 
Organize v Include in library v Share with v Burn New folder 2 | @ 





A 


IX Favorites Name Date modified 


BI Desktop || embeddedi.html — — — Id £d£deti 16:54 


15) Recent Places 
8 Downloads Double click pada 


file embeddedl.html 
ME Desktop 
cad Libraries 











Gambar 3.3 Klik Ganda pada EmbeddedI.html 
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File Edit View Bookmarks Widgets Feeds Tools Help 


IE Sintaks Dasar CSS Xx | 





De el Ian LD AE Dm | | Local | localhost/E:/CSS/bab3/embedded.htmi 











Gambar 3.4 Hasil Embedded Style Sheet 1 


Kita akan mencoba untuk membuatkan contoh penggunaan 
Embedded Style Sheet yang lain. Kali ini kita akan menggunakan 
background dengan latar belakang bergambar. Siapkan gambar 
terlebih dahulu, kemudian letakkan ke dalam folder bab3. Di sini 
penulis mempunyai gambar dengan nama welcome2.jpg. 


Buat file HTML yang lain dan simpan dengan nama 
embedded2.html ke dalam folder CSSibab3. Selanjutnya ketikkan 
skrip berikut. 


Shtml» 
KShead» 
«title» Sintaks Dasar CSS «/title» 
«/head» 
KSstyle» 
body ( 
background-image: url ('welcome2.jpg'): 
, 
hl ( 
font-size:18pt: 
color: green: 
, 
pt 
color: blue: 
font-weight: bold: 
text-decoration: underline: 
, 
«/style» 
Sbody» 


Sh1l» Panduan Lengkap Pemograman CSS untuk Pemula «/h1» 
«Sp? Embedded Style Sheet «/p» 


Sp? PT. Elex Media Komputindo «/p» 


«/body» 
«/html» 


background-image: url ('welcome2.jpg'): merupakan skrip CSS 
untuk mengubah latar belakang halaman menjadi sebuah gambar 
(penulis akan membahas lebih dalam lagi pada bab-bab selan- 
jutnya). 

Dari penulisan skrip di atas, kita klik ganda (double click) pada file 
embedded2.html di folder CSSibab3 tersebut (lihat Gambar 3.5). 
Kemudian hasilnya akan tampak seperti pada Gambar 3.6. 


—sia) Xx 


ll Data (E) » CSS » bab3 5 Search bab3 | 


File Edit View Tools Help 


TAN 
ea 


Organize v Include in library v Share with v Burn New folder 2 AI | @ 





YK Favorites 2 Name : Date modified 
FI Desktop 2 embeddedi.htmi 3/29/2011 16:54 


"E) Recent Places (@& embedded2.html 222201117140 


8 Downloads rel welcome2.JPG 
Klik ganda pada file 
MX Desktop embeddedl.htmil 


ie Libraries 























Gambar 3.6 Hasil Embedded Style Sheet 2 
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Kiranya dari pembahasan singkat mengenai Embedded Style 
Sheet di atas dapat memberikan pemahaman bagi Anda. 


3.3 Inline Style Sheet 


Inline Style Sheet merupakan salah satu cara penggunaan kode 
CSS langsung pada tag HTML yang dibutuhkan. Format penu- 
lisannya sebagai berikut. 


«tag HTML style-"properti: value/nilai" ...... «/tag HTML 


Misalnya kita ingin agar tulisan yang digunakan tag HTML «p» 
adalah berwarna merah. Dengan menggunakan cara inline, kita 
dapat menyuntikkannya langsung pada tag HTML yang dimaksud, 
misalnya: 


«p style-“color: red"» Contoh Paragraf 1 «/p» 
«Kp style-“color: green”» Contoh Paragraf 2 «/p» 


Untuk lebih jelasnya, kita akan buat kembali file HTML yang telah 
disuntikkan (inline) dengan kode CSS. Buat file dengan nama 
inline1.html kemudian letakkan dalam folder bab3. Selanjutnya 
ketikkan skrip berikut. 


N 


html» 
head» 
Ktitle» Inline Style Sheet «/title» 
/head» 
body» 


N 


AN 


h1 style-"color: red"» Panduan Lengkap Pemograman CSS untuk 
emula «/h1» 

p style-"color: green"» Inline Style Sheet «/p» 

p style-"color: blue"» PT. Elex Media Komputindo «/p? 





NA OA 


«/boay» 
«/html» 


Hasil pengetikan kode CSS secara inline pada tag HTML dapat 
dilihat pada Gambar 3.7. 
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ND Inline Style Sheet - Opera 











| File Edit View Bookmarks  Widgets Feeds Tools Help 


(8 Inline Style Sheet an 


kel || Ia LD || AE || om || Local | Iocalhost/E:/CSS/bab3/inlinel.html 2 


















Panduan Lengkap Pemograman CSS untuk Pemula 


Inline Style Sheet 


PT. Elex Media Komputindo 





Gambar 3.7 Hasil Inline Style Sheet 1 


Dan lagi-lagi warnanya juga menjadi hitam karena gambarnya di- 
grayscale sih @, makanya lihatnya dari web browser saja ya O. 


Kita akan buat satu lagi saja deh file HTML yang telah disuntikkan 
secara inline oleh kode CSS. Buat file HTML dengan nama 
inline2.html kemudian letakkan bersama-sama dengan 
inline 1.html, yaitu pada folder bab3. Kemudian ketikkan contoh 
penggunaan skrip inline yang kedua berikut: 


Shtml» 
KShead» 
«title» Inline Style Sheet «/title» 
«/head» 
Kbody style-"background-image: url( 'welcome2.jpg')"» 


«h1 style-"color: red"» Panduan Lengkap Pemograman CSS untuk 
Pemula «/h1» 

«Kp style-"color: green"» Inline Style Sheet «/p» 

«p style-"color: blue"» PT. Elex Media Komputindo «/p» 


«/body» 
«/html» 


Maka hasil skrip tersebut sama seperti pada Gambar 3.6. 


3.4 Linked Style Sheet 


Kode CSS yang dikerjakan dalam file HTML memiliki beberapa 
kelemahan, di antaranya: 
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1. Dalam membangun web, kita tidak bisa terpaku pada satu 
halaman saja. Dalam pengerjaan pasti memiliki lebih dari satu 
file. Oleh karena itu, jika kita ingin melakukan perubahan pada 
suatu halaman web, maka kita akan direpotkan dengan 
membuka file HTML satu per satu, untuk kemudian dilakukan 
perubahan kode CSS itu. 


2. Dengan hal merepotkan seperti itu, tentu pengerjaan juga akan 
memakan waktu lebih lama. 


Oleh sebab itu, dengan adanya metode Linked Style Sheet dapat 
memudahkan kita sebagai pembuat web desain karena file CSS 
dan file HTML telah dipisahkan. Sehingga dengan metode ini, kita 
cukup mengubah kode pada file CSS yang ingin diubah saja. 


Misal kita memiliki file CSS dengan nama style.css dan file HTML 
dengan nama linked.html, maka format penulisan metode linked 
untuk menghubungkan file CSS dan file HTML sebagai berikut. 


«link rel-"stylesheet” href-”"style.css” type-”text/css”» 
Kita langsung saja dihadapkan dengan praktek untuk mendalami 
penggunaan Linked Style Sheet. 


Buat file CSS dengan nama style.css dan letakkan dalam folder 
bab3, untuk kemudian ketikkan beberapa kode CSS berikut: 


body ( 
background: blue: 
font-family: tahoma: 

) 

hl ( 
font-size: 18pxj 
text-align: center: 
color: yellow, 

) 

h2 ( 
font-size: 18pxj 
text-align: right, 
color: yellow, 

, 

pt 


font-size: 12pxj 
text-align: left, 
color: white, 
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Penjelasan Atribut 


Body, kita menciptakan selektor tag «boay» dengan atribut atau 
nilai: 
- Latar belakang adalah halaman berwarna biru (background: 
blues! 


- Jenis tulisan yang dipakai dalam selektor body, yaitu 
tahoma font-family: tahoma:! 


H1, kita menciptakan selektor tag «hi» dengan atribut atau nilai: 


- Size (ukuran) huruf yang dipakai adalah 18 piksel (tont- 
size: 18px:) 


- Kita juga menentukan posisi tulisan adalah center f(text- 


align: center: 


- Kita juga menset agar warna tulisan yang digunakan oleh 
selektor ini adalah kuning (yellow) (color: yellow:) 


H2, sama saja seperti pada H1, hanya saja kita menset posisi 
tulisan adalah kanan (right) (text-align: right: ) 


P, kita menciptakan selektor untuk tag xp» dengan atribut atau 
nilai: 
- Size (ukuran) huruf yang dipakai adalah 12 piksel (tont- 
size: 12px:) 


- Posisi yang ditentukan adalah rata kiri (text-align: left:l 


- Sedangkan warna yang dipakai untuk selektor tag «p» 
adalah putih (white) (color: white:) 


Setelah file CSS dibuat, kita akan membuatkan file HTML dengan 
nama linked.html dan letakkan dalam folder bab3. Kemudian 
ketikkan skrip berikut: 


«html» 
Shead» 
Ktitle» Linked Style Sheet «/title» 
Slink rel-"stylesheet" href-"style.css" 
type-"text/css"» 
«/head» 
Sbody» 
Sh12 Linked Style Sheet «/hl» 
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«Sp? Belajar CSS itu Mudah dan Menyenangkan «/p» 
«Sh2» agus Saputra --- Feni Agustin «/h2» 
«/body» 
«/html» 


Sekarang lihat, setelah Anda klik dua kali (double click) pada file 
linked.html dalam folder bab3 yang telah dibuat barusan, akan 
tampil halaman seperti Gambar 3.8 berikut ini. 


File Edit View Bookmarks  Widgets Feeds Tools Help 
(5) Linked Style Sheet 


Fa NAK , ANK: IP Local | localhost/E:/CSS/bab3/linked.html 


Linked Style Sheet 


Belajar CSS itu Mudah dan Menyenangkan 


Agus Saputra ——- Feni Agustin 





Gambar 3.8 Linked Style Sheet 


3.5 Cara Memberi Komentar pada File HTML 


Adakalanya kita ingin menyisipkan komentar pada file HTML 
dengan maksud untuk mengingatkan dan mempermudah dalam 
mencari file-file yang diinginkan. Soalnya nih, kadang kala tuh 
orang lupa dalam membuat skrip ... Namanya juga manusia ya 
&.. yah. Dengan adanya komentar, seseorang dapat dengan 
mudah mencari-cari kode dari ratusan bahkan ribuan baris kode 
yang disajikan. 


Untuk itu kita akan belajar bagaimana memberikan komentar 
dalam suatu file. Dalam hal ini kita akan memberikan komentar 
pada file HTML terlebih dahulu. Tenang saja .. komentar tersebut 
tidak akan ditampilkan kok pada halaman web, karena komen- 
tarnya kita nonaktifkan (disable) dengan bantuan sedikit perintah. 
Aturan formatnya seperti berikut. 
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«€!-- Komentar Anda --» 


File yang diberi tanda komentar («!-- bla.. bla.. --») akan 
terlihat berwarna hijau ... Jadi, jika Anda melihat kumpulan skrip 
berwarna hijau, jangan diambil pusing. Itu hanyalah sebuah 
komentar. 


Contoh yang nyata adalah lihat pada kumpulan skrip yang 
tercetak tebal berikut: 


«html» 
Shead» 
«title» Linked Style Sheet «/title» 
€!-- Link untuk CSS --5 
Klink rel-"stylesheet" href-"style.css" type-"text/css"» 
«/head» 
«€!-- ini adalah tag body --» 
«body» 
«S!-- Isi Konten --5 
«h1» Linked Style Sheet «/hl1» 
Xp? Belajar CSS itu Mudah dan Menyenangkan «/p» 
«h2» Agus Saputra --- Feni Agustin «/h2» 
«/body» 
«/html» 


Hal yang sangat penting untuk diingat, pembuka komentar adalah 
perintah tag «!-- dan pembuka komentar tersebut harus diakhiri 
oleh penutup --». Jika Anda hanya memberikan pembuka 
komentar f«!--! tanpa diakhiri oleh penutup komentar f(--»1, maka 
semua file HTML setelah perintah «:-- akan dianggap sebagai 
komentar. 


3.6 Cara Memberi Komentar pada File CSS 


Identik sama dengan Subbab 3.5, hanya saja perintah yang digu- 
nakan berbeda. Jika file HTML menggunakan skrip «!-- dan --», 
maka CSS menggunakan kode /- dan «/. Berikut format penulisan 
komentar pada CSS: 


/x Komentar Anda “/ 
Contoh nyatanya seperti pada kumpulan skrip CSS berikut. 


/x FIle CSS untuk tag Body “/ 
body ( 
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background: blue: 
font-family: tahoma: 


/x File CSS untuk Tag H1 “/ 

hl ( 
font-size: 18pxj 
text-align: center: 
color: yellow, 

) 


/“ File CSS untuk Tag H2 «/ 

h2 ( 
font-size: 18px, 
text-align: right, 
color: yellow, 

) 


/“ File CSS untuk Tag P “/ 


pt 
font-size: 12pxj 
text-align: left: 
color: white: 
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